const canvas = document.getElementById('pfd');
const ctx = canvas.getContext('2d');

function drawPFD(pitch = 0, roll = 0, heading = 84, gs = 8, alt = 99) {
  ctx.clearRect(0, 0, 300, 300);
  ctx.save();
  ctx.translate(150, 150);
  ctx.rotate((roll * Math.PI) / 180);
  ctx.translate(0, pitch * 2); // pitch每度2像素

  // 天空
  ctx.fillStyle = '#4a5a6a';
  ctx.fillRect(-150, -150, 300, 150);
  // 地面
  ctx.fillStyle = '#7a4a2a';
  ctx.fillRect(-150, 0, 300, 150);

  // 刻度线
  ctx.strokeStyle = '#fff';
  for (let i = -40; i <= 40; i += 10) {
    ctx.beginPath();
    ctx.moveTo(-40, i * -2);
    ctx.lineTo(40, i * -2);
    ctx.stroke();
    ctx.fillText(i, -55, i * -2 + 5);
    ctx.fillText(i, 45, i * -2 + 5);
  }
  ctx.restore();

  // 中心准星
  ctx.strokeStyle = 'lime';
  ctx.beginPath();
  ctx.moveTo(140, 150);
  ctx.lineTo(160, 150);
  ctx.moveTo(150, 140);
  ctx.lineTo(150, 160);
  ctx.stroke();

  // GS速度条
  ctx.fillStyle = '#fff';
  ctx.fillRect(10, 100, 30, 100);
  ctx.fillStyle = '#000';
  ctx.fillText('GS', 15, 115);
  ctx.fillText(gs, 20, 150);

  // ALT高度条
  ctx.fillStyle = '#fff';
  ctx.fillRect(260, 100, 30, 100);
  ctx.fillStyle = '#000';
  ctx.fillText('ALT', 265, 115);
  ctx.fillText(alt, 270, 150);

  // 航向
  ctx.fillStyle = '#fff';
  ctx.fillRect(120, 270, 60, 20);
  ctx.fillStyle = '#000';
  ctx.fillText(heading, 145, 285);
}

// 示例：每秒刷新
let pitch = 0,
  roll = 0;
setInterval(() => {
  pitch = 10 * Math.sin(Date.now() / 1000);
  roll = 20 * Math.sin(Date.now() / 1500);
  drawPFD(pitch, roll, 84, 8, 99);
}, 50);
